<script>
const elemConst = {
  size: {
    'normal': 'small',
    'large': 'medium',
    'small': 'mini'
  },
  type: {
    'primary': 'primary',
    'danger': 'danger'
  }
}

const mintConst = {
  size: {
    'normal': 'normal',
    'large': 'large',
    'small': 'small'
  },
  type: {
    'primary': 'primary',
    'danger': 'danger'
  }
}

const paramConst = {
  size: ['normal', 'large', 'small'],
  type: ['primary', 'danger']
}

function mapParams () {
  var res = {}
  for (let name in paramConst) {
    // res['priv_' + name] = function (mv) {
    //   return mv.paramList[name][mv[name]]
    // }
    // res['priv_' + name] = new Function(`return this.paramList.${name}[this.${name}]`)
    const fn = (name) => {
      return (mv) => {
        return mv.paramList[name][mv[name]]
      }
    }
    res['priv_' + name] = fn(name)
  }
  return res
}

export default {
  props: {
    size: {
      type: String,
      default: 'large',
      validator (val) {
        return (paramConst.size.indexOf(val) > -1)
      }
    },
    type: {
      type: String,
      default: 'default',
      validator (val) {
        return (paramConst.type.indexOf(val) > -1)
      }
    }
  },
  computed: {
    paramList () {
      return this.$isMobile ? mintConst : elemConst
    },
    ...mapParams()
  },
  render (h) {
    const btn = this.$isMobile ? 'mt-button' : 'el-button'
    const props = {
      size: this.priv_size,
      type: this.priv_type
    }
    return h(btn, { props }, this.$slots.default)
  }
}
</script>
